<script setup lang="ts">
import { ref, computed } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";

// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});

// 初始化ECharts
const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });

// 根据配置项渲染ECharts
setOptions({
  tooltip: {
    trigger: "item",
    triggerOn: "mousemove"
  },
  animation: false,
  series: [
    {
      type: "sankey",
      bottom: "10%",
      emphasis: {
        focus: "adjacency"
      },
      data: [
        { name: "a" },
        { name: "b" },
        { name: "a1" },
        { name: "b1" },
        { name: "c" },
        { name: "e" }
      ],
      links: [
        { source: "a", target: "a1", value: 5 },
        { source: "e", target: "b", value: 3 },
        { source: "a", target: "b1", value: 3 },
        { source: "b1", target: "a1", value: 1 },
        { source: "b1", target: "c", value: 2 },
        { source: "b", target: "c", value: 1 }
      ],
      orient: "vertical",
      label: {
        position: "top"
      },
      lineStyle: {
        color: "source",
        curveness: 0.5
      }
    }
  ]
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 50vh" />
</template>
